<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>新漫监控平台</title>
    <link rel="stylesheet" href="css/layout.css">
    <link rel="shortcut icon" href="images/logo1.ico" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery.slimscroll.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
    <script src="js/layer/layer.js"></script>
</head>

<body class="interface-page">
    <img src="images/bg1.jpg" class="bgimg" alt="">
    <div class="contentbox contentboxInterface">
        <div class="title">
            <span>后台管理界面</span>
            <span>|</span>
            <span class="small-title">SIMMAX</span>
            <div class="avatar-box">
                <img src="images/bg.jpg" class="avatar" alt="">
                <span class="ava-name">LIULISHEJUZHE</span>
            </div>
            <div class="setting-box">
                <a href="#">
                    <img src="images/back.png" alt=""> 退出
                </a>
            </div>
        </div>
        <ul class="menu-box">
            <li class="menu1 active">
                <a href="interface.html">连接设备</a>
            </li>
            <li class="menu2">
                <a href="index.html">实时监控</a>
            </li>
            <li class="menu6">
                <a href="dataManager.html">数据管理</a>
            </li>
            <li class="menu3">
                <a href="Parameters.html">参数设置</a>
            </li>
            <li class="menu4 ">
                <a href="user.html">用户管理</a>
            </li>
            <li class="menu5">
                <a href="#">帮助</a>
            </li>
            <li class="menu7">
                <a href="systemLog.html">系统设置</a>
            </li>
        </ul>

        <div class="interfaceImg">
            <span class="interfaceSpan active">全选</span>
            <span class="interfaceSpan">全不选</span>
            <span class="interfaceSpan">反选</span>
            <span class="interfaceSpan4">确定</span>
        </div>
        <div class="menu-listpictures menu-listInterface">
            <img class="listbox" src="images/listbox.png" alt="">
            <img class="listpicture1" src="images/listpicture1.png" alt="">
            <img class="listpicture2" src="images/listpicture2.png" alt="">
        </div>
        <div class="mainbox mainboxInterface">
            <div id="screenbox" class="screenbox">
                <span class="slimTop"></span>
                <span class="slimBottom"></span>
                <div>
                    <!--设备状态-->
                    <ul class="device-list device-list1 clearfix device-list-active">

                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(".device-list").slimScroll({
        height: '480px',
        size: "10px",
        alwaysVisible: true,
        opacity: 1,
        railVisible: true,
        railColor: 'url("images/scroll_bg.png")',
        railOpacity: 1,
        railBorderRadius: "7px",
        railDraggable: true
    });

</script>
<script>
    /*点击进行切换*/
    $(".interfaceImg .interfaceSpan").on('click', function () {
        $(this).addClass('active').siblings().removeClass('active');
    });
    /*点击确认进行按钮选择*/
    $(document).on('click',"input[type='checkbox']",function () {
        var selDeviceList = [];
        var deviceList = [];
        selDeviceList.push($(this).attr('did'));
        var bool=$(this).attr('checked');
        $(this).attr('checked',!bool);
        var isMonitored=bool?1:0;
        deviceList.push(isMonitored);
        var postData = { idList: selDeviceList, monitoredList : deviceList };
        console.log(postData);
        $.ajax({
            url: apiDomain + inferfaceMonitoring,
            type: 'post',
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            traditional: true,
            data: postData,
            success: function (data) {
                unlogin(data);
                window.location.reload()
            }
        })
    })

    $(".interfaceSpan4").on('click', function () {
        var spanHtml = $('.interfaceSpan.active').html();
        if (spanHtml === '全选') {
            var selDeviceList = [];
            var deviceList = [];
            $('input[type=checkbox]').each(function () {
                $(this).attr('checked',true);
                selDeviceList.push($(this).attr('did'));
                deviceList.push("1");
            });
            var postData = { idList: selDeviceList, monitoredList : deviceList };
            $.ajax({
                url: apiDomain + inferfaceMonitoring,
                type: 'post',
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                traditional: true,
                data: postData,
                success: function (data) {
                    unlogin(data)
                }
            })
        } else if (spanHtml === '全不选') {
            var deviceList = [];
            var selDeviceList = [];
            $('input[type=checkbox]').each(function () {
                $(this).attr('checked',false);
                deviceList.push($(this).attr('did'));
                selDeviceList.push("0");
            });

            var postData = { idList: deviceList, monitoredList : selDeviceList };
            $.ajax({
                url: apiDomain + inferfaceMonitoring,
                type: 'post',
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                traditional: true,
                data: postData,
                success: function (data) {
                    console.log(data,7777);
                    unlogin(data)
                }
            })
        } else if (spanHtml === '反选') {
            var selDeviceList = [];
            var deviceList = [];
            $('input[type=checkbox]').each(function () {
                if ($(this).attr('checked')) {
                    $(this).attr('checked',false);
                    deviceList.push($(this).attr('did'));
                    selDeviceList.push("0");

                } else if (!$(this).attr('checked')) {
                    $(this).attr('checked',true);
                    deviceList.push($(this).attr('did'));
                    selDeviceList.push("1");
                }
            });
            var postData = { idList: deviceList, monitoredList : selDeviceList };
            console.log(postData);
            $.ajax({
                url: apiDomain + inferfaceMonitoring,
                type: 'post',
                data: postData,
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                traditional: true,
                success: function (data) {
                    console.log(data,5555);
                    unlogin(data)
                }
            });
        }
    });
    /*点击编辑进行对数值进行编辑*/
    function imgEditor(e) {
        clearInterval(timer);
        var _this = $(e);
        var divHtml = _this.siblings('span').html();
        $('.deviceInput').val(divHtml);
        _this.parents('.device-sty3').hide();
        _this.parents('.device-sty3').siblings('.deviceEditores').show();
    }
    /*点击确认将值放入span中*/
    function textSpan(e) {
        var _this = $(e);
        var spanVlue = _this.siblings('.deviceInput').val();
        _this.parents('.deviceEditores').siblings('.device-sty3').find('.deviceEditor span').html(spanVlue);
        _this.parents('.deviceEditores').hide();
        _this.parents('.deviceEditores').siblings('.device-sty3').show();
        timer = setInterval(function () {
            var id = $('.device-list-active').parent().index();
            id++;
            getList(id);
        }, 1000);
        var id = _this.parents('.device-item').find('.deviceInputHidden').val();
        var nickName=_this.prev('.deviceInput').val();
        $.ajax({
            url: apiDomain + inferfaceSubmit,
            xhrFields: {
                withCredentials: true
            },
            type: 'POST',
            crossDomain: true,
            data: {
                id: id,
                nickname:nickName
            },
            success: function (data) {
                unlogin(data)
                window.location.reload();
            }
        })

    };
    var colors = ["#ea0a0a", "#f4b408", "#00a0e9"];
    var level = [1, 2, 3, 4];//等于1为低级，等于2中级；等于3为高级；等于4是报警具体到时对接可以修改
    function getList() {
        $.ajax({
            url: apiDomain + inferfaceStatus,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (data) {
                unlogin(data);
                var dataLength = data.data.list.length;
                var data = data.data.list;
                var $device = $('.device-list-active').find("li.device-item");
                if (dataLength != $device.length) {
                    $('.device-list-active').html('');
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].offline != true) {
                            var nickNames=data[i].nickname;
                            if(data[i].nickname==undefined){
                                nickNames='';
                            }
                            $('.device-list-active').append("<li class='device-item'>" +
                                "<div class='size10 device-sty1'>" +
                                "<label>" +
                                "<input did='" + data[i].deviceId + "' type='checkbox' name='box' class='interfaceInput'" + (!data[i].monitored ? '' : "checked='checked'") +
                                "/><div class='show-box'></div></label><input type='hidden' name='deviceNames[]' class='deviceInputHidden' value=" + data[i].deviceId + "><span class='deviceidSpan'>编号" + data[i].deviceId + "</span></div>" +
                                "<div class='device-progress'>" +
                                "<div class='progress'  data-width='" + data[i].battery / 8 * 100 + "'></div></div>" +
                                "<div class='size11 device-sty2'>" +
                                "<span>" + Math.floor(data[i].doserate * 100) / 100 + "</span>usv/h</div>" +
                                "<div class='device-sty3 device-sty33'><div class='deviceEditor'> " +
                                "<span>" + nickNames + "</span>" +
                                "<img src='images/editor.png' class='editorImg' onclick='imgEditor(this)'></div>" +
                                "</div>" +
                                "<div class='device-sty3 deviceEditores'> " +
                                "<input type='text' class='deviceInput' value=''>" +
                                "<span onclick='textSpan(this)'>确认</span></div></li>");
                        } else {
                            $('.device-list-active').append("<li class='device-item none-progress'>" +
                                "<div class='size10 device-sty1'>" +
                                "<label><input did='" + data[i].deviceId + "' type='checkbox' name='box' class='interfaceInput'" + (!data[i].monitored ? '' : "checked='checked'") +
                                "/><div class='show-box'></div> </label><input type='hidden' name='deviceNames[]' class='deviceInputHidden' value=" + data[i].deviceId + "><span class='deviceidSpan'>编号" + data[i].deviceId + "</span></div> " +
                                "<div class='device-progress'>未连接</div> " +
                                "<div class='device-sty3 device-sty33'><div class='deviceEditor'>" +
                                "<span>" + Math.floor(data[i].doserate * 100) / 100 + "</span>" +
                                "<img src='images/editor.png' class='editorImg'  onclick='imgEditor(this)'></div>" +
                                "</div><div class='device-sty3 deviceEditores'>" +
                                "<input type='text' class='deviceInput' value=''>" +
                                "<span onclick='textSpan(this)'>确认</span></div></li>");
                        }
                    }
                } else {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].offline != true) {
                            var progressHtml = $device.eq(i).find(".device-progress").html();
                            $device.eq(i).find('.device-sty1 .deviceidSpan').html("编号" + data[i].deviceId);
                            if (progressHtml == '未连接') {
                                var nickNames=data[i].nickname;
                                if(data[i].nickname==undefined){
                                    nickNames='';
                                }
                                $device.eq(i).html("<div class='size10 device-sty1'>" +
                                    "<label>" +
                                    "<input did='" + data[i].deviceId + "' type='checkbox' name='box' class='interfaceInput'" + (!data[i].monitored ? '' : "checked='checked'") +
                                    "/><div class='show-box'></div></label>编号" + data[i].deviceId + "</div>" +
                                    "<div class='device-progress'>" +
                                    "<div class='progress'  data-width='" + data[i].battery / 8 * 100 + "'></div></div>" +
                                    "<div class='size11 device-sty2'>" +
                                    "<span>" + Math.floor(data[i].doserate * 100) / 100 + "</span>usv/h</div>" +
                                    "<div class='device-sty3 device-sty33'><div class='deviceEditor'> " +
                                    "<span>" + nickNames + "</span>" +
                                    "<img src='images/editor.png' class='editorImg' onclick='imgEditor(this)'></div>" +
                                    "</div>" +
                                    "<div class='device-sty3 deviceEditores'> " +
                                    "<input type='text' class='deviceInput' value=''>" +
                                    "<span onclick='textSpan(this)'>确认</span></div>");
                            } else {
                                var nickNames=data[i].nickname;
                                if(data[i].nickname==undefined){
                                    nickNames='';
                                }
                                $device.eq(i).find('.device-sty2').html("<span>" + Math.floor(data[i].doserate * 100) / 100 + "</span>usv/h");
                                $device.eq(i).find('.device-sty33').html("<div class='deviceEditor'>" +
                                    "<span>" + nickNames+ "</span>" +
                                    "<img src='images/editor.png' class='editorImg' onclick='imgEditor(this)'></div>" +
                                    "</div>");
                                $device.eq(i).find(".progress").each(function () {
                                    var _val = data[i].battery / 8 * 100;
                                    var valWidth = data[i].flagAlarm;
                                    var _vals = _val + '%';
                                    $(this).attr("data-width", _val);
                                    $(this).css("width", _vals);
                                    if (valWidth == level[1]) {
                                        $(this).css({
                                            "backgroundColor": colors[1]
                                        });
                                    } else if (valWidth == level[2]) {
                                        $(this).css({
                                            "backgroundColor": colors[0]
                                        });
                                    } else if (valWidth == level[3]) {
                                        $(this).css({
                                            "backgroundColor": colors[0]
                                        });
                                    } else if (valWidth == level[0]) {
                                        $(this).css({
                                            "backgroundColor": colors[2]
                                        });
                                    }
                                });
                            }
                        } else {
                            $device.eq(i).html("<div class='size10 device-sty1'>" +
                                "<label><input did='" + data[i].deviceId + "' type='checkbox' name='box' class='interfaceInput' " + (!data[i].monitored ? '' : "checked='checked'") +
                                "/><div class='show-box'></div> </label>编号" + data[i].deviceId + "</div> " +
                                "<div class='device-progress'>未连接</div> " +
                                "<div class='device-sty3'><div class='deviceEditor'>" +
                                "<span>" + Math.floor(data[i].doserate * 100) / 100 + "</span>" +
                                "<img src='images/editor.png' class='editorImg'  onclick='imgEditor(this)'></div>" +
                                "</div><div class='device-sty3 deviceEditores'>" +
                                "<input type='text' class='deviceInput' value=''>" +
                                "<span onclick='textSpan(this)'>确认</span></div>")
                        }
                    }
                }
            }
        })
    }

    getList(1);

    function updateList() {
        $.ajax({
            url: apiDomain + inferfaceStatus,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (data) {
                unlogin(data)
                var dataLength = data.data.list.length;
                var data = data.data.list;
                var $device = $('.device-list-active').find("li.device-item");
                //定义数组保存当前接口数据的设备ID
                var curDeviceList = [];
                for (var i = 0; i < data.length; i++) {
                    curDeviceList.push(data[i].deviceId);
                    if (data[i].offline != true) {
                        //找到id对应的div元素，修改需要更新的内容
                        var $devbox = $('.device-list-active').find('input[did=' + data[i].deviceId + ']').parent().parent().parent();
                        //如果找到这个id的元素就更新数据，如果没有找到则新增一个设备面板
                        if ($devbox) {
                            $devbox.find('.device-progress').html("<div class='progress' data-width='" + data[i].battery / 8 * 100 + "'></div>")
                            $devbox.find('label').html("<input did='" + data[i].deviceId + "' type='checkbox' name='box' class='interfaceInput' " + (!data[i].monitored ? '' : "checked='checked'") +
                                "/><div class='show-box'></div>")
                            
                        } else {
                            $('.device-list-active').append("<div class='size10 device-sty1'>" +
                                "<label><input did='" + data[i].deviceId + "' type='checkbox' name='box' class='interfaceInput' " + (!data[i].monitored ? '' : "checked='checked'") +
                                "/><div class='show-box'></div></label>编号" + data[i].deviceId + "</div> " +
                                "<div class='device-progress'>未连接</div> " +
                                "<div class='device-sty3'><div class='deviceEditor'>" +
                                "<span>" + Math.floor(data[i].doserate * 100) / 100 + "</span>" +
                                "<img src='images/editor.png' class='editorImg'  onclick='imgEditor(this)'></div>" +
                                "</div><div class='device-sty3 deviceEditores'>" +
                                "<input type='text' class='deviceInput' value=''>" +
                                "<span onclick='textSpan(this)'>确认</span></div>")
                        }
                    } else {
                        var $devbox = $('.device-list-active').find('input[did=' + data[i].deviceId + ']').parent().parent().parent();
                        $devbox.find('.device-progress').html('未连接')
                    }
                    $device.eq(i).find(".progress").each(function () {
                        var _val = data[i].battery / 8 * 100;
                        var valWidth = data[i].flagAlarm;
                        var _vals = _val + '%';
                        $(this).attr("data-width", _val);
                        $(this).css("width", _vals);
                        if (valWidth == level[1]) {
                            $(this).css({
                                "backgroundColor": colors[1]
                            });
                        } else if (valWidth == level[2]) {
                            $(this).css({
                                "backgroundColor": colors[0]
                            });
                        } else if (valWidth == level[3]) {
                            $(this).css({
                                "backgroundColor": colors[0]
                            });
                        } else if (valWidth == level[0]) {
                            $(this).css({
                                "backgroundColor": colors[2]
                            });
                        }
                    });
                }

                //找到所有设备面板的编号
                $('.device-list-active .deviceidSpan').each(function () {
                    // 获取设备id
                    var id = $(this).html().slice(2)
                    var exit = false
                    curDeviceList.forEach(function (el) {
                        // 如果找到相等的设备，说明设备存在
                        if (el == id) exit = true
                    })
                    // 如果设备信息在接口中不存在，则清除掉这个设备面板
                    if (!exit) {
                        $(this).remove()
                    }
                })


            }
        })
    }

    //每隔一秒重新获取并展示
    var timer = setInterval(function () {
       getList();
    }, 1000);
</script>

</html>